<template>
	<div class="content">
		<el-scrollbar class="content-scrollbar">
			<div class="content-header">
				<el-input v-model="salaryTitle" placeholder="数据" @keydown.enter="search"></el-input>
				<el-date-picker
					v-model="sendTime"
					type="monthrange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-dd"
					style="margin-right: 10px;"
					:clearable="false"
					@change="handleDateChange"
				></el-date-picker>
				<el-button type="primary" icon="el-icon-search" plain @click="search">搜索</el-button>
				<el-button type="primary" icon="el-icon-refresh" plain @click="reset">重置</el-button>
			</div>
			<div class="table">
				<el-table :data="tableData" border style="width: 100%;">
					<el-table-column prop="salaryTitle" label="提交时间" width="180">2020-06-19 17:22:58</el-table-column>
					<el-table-column prop="lookOverStatus" label="预约人" width="120">吴宇森</el-table-column>
					<el-table-column prop="confirmStatus" label="预约场馆" width="120">场馆A</el-table-column>
					<el-table-column prop="burnAfterReading" label="预约时间" width="120">2020-06-22 07:00-08:00</el-table-column>
					<el-table-column prop="sendTime" label="提交时间" width="180">
						<template slot-scope="scope">{{ scope.row.sendTime | formatTime }}</template>
					</el-table-column>
					<el-table-column prop="sendStatus" label="预约人" width="120">
						<template slot-scope="scope">{{ scope.row.sendStatus | sendStatusChange }}</template>
					</el-table-column>
					<el-table-column prop="shareStatus" label="预约场馆" width="120"></el-table-column>
					<el-table-column prop="originalFileName" label="预约时间">
						<template slot-scope="scope">
							<a
								:href="`${$BASE_URL}/payrollFile/originalFile?spmId=${scope.row.spmId}`"
							>{{ scope.row.originalFileName }}</a>
						</template>
					</el-table-column>
					<el-table-column prop="uploadTime" label="上传时间" width="180">
						<template slot-scope="scope">{{ scope.row.uploadTime | formatTime }}</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="200">
						预约通过/拒绝通过
						<template slot-scope="scope">
							<el-button type="text" @click="handleViewClick(scope.row)">查看</el-button>
							<!-- <el-button type="text" @click="handleUpdateClick(scope.row)">编辑</el-button> -->
							<el-popover v-model="scope.row.visible" placement="top" trigger="click" width="200">
								<p>
									{{
									[
									'成功',
									'还有未发送的数据，是否删除？确认之后请求删除接口',
									'请先撤回已发送的数据！全部撤回之后便可删除'
									][verificationStatus]
									}}
								</p>
								<br />
								<div class="flex-center" v-if="verificationStatus === 0 || verificationStatus === 1">
									<el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
									<el-button type="primary" size="mini" @click="handleDeleteClick(scope.row)">确定</el-button>
								</div>
								<el-button
									slot="reference"
									type="text"
									style="margin: 0 10px;"
									@click="handleposVerify(scope.row)"
								>删除</el-button>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="pagination">
				<el-pagination
					small
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page.currentPage"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="page.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="page.total"
				></el-pagination>
			</div>
		</el-scrollbar>
	</div>
</template>

<script>
import { setStore } from '@/methods/utils'
import { postPayrollList, postPayrollVerifyRemove, postPayrollRemove } from '@/APIs/index/index'
export default {
	name: 'AppointmentReview',
	data() {
		return {
			page: {
				currentPage: 1,
				pageSize: 10,
				total: 0
			},
			salaryTitle: '',
			sendTime: [],
			tableData: [],
			verificationStatus: 0
		}
	},
	activated() {
		this.postPayrollDetailsListData()
	},
	methods: {
		// 获取工资单详情数据
		async postPayrollDetailsListData() {
			const [salaryTitle, sendStartTime, sendEndTime] = [this.salaryTitle, ...this.sendTime]
			const { currentPage: pageNum, pageSize } = this.page
			const {
				data: { list = [], total }
			} = await postPayrollList({ salaryTitle, sendStartTime, sendEndTime, pageNum, pageSize })
			this.tableData = list.map(item => ({ ...item, visible: false }))
			setStore('PAYROLL_LIST', JSON.stringify(list))
			this.page.total = total
		},
		// 校对
		async handleposVerify(row) {
			try {
				const { spdId: id } = row
				const { data } = await postPayrollVerifyRemove({ id })
				this.verificationStatus = data
				row.visible = !row.visible
			} catch (error) {
				throw new Error(error)
			}
		},
		// 查询搜索
		search() {
			this.page.currentPage = 1
			this.postPayrollDetailsListData()
		},
		// 重置
		reset() {
			this.salaryTitle = ''
			this.sendTime = []
			this.page.currentPage = 1
			this.postPayrollDetailsListData()
		},
		handleDateChange() {
			this.search()
		},
		handleViewClick(row) {
			this.$router.push(`/paySlipManagement/PreviewPaySlip/${row?.spmId}`)
		},
		// handleUpdateClick(row) {
		// 	console.log(row)
		// },
		handleSizeChange(val) {
			this.page.pageSize = val
			this.postPayrollDetailsListData()
		},
		handleCurrentChange(val) {
			this.page.currentPage = val
			this.postPayrollDetailsListData()
		},
		async handleDeleteClick(row) {
			const { spmId: id } = row
			const { data = -1 } = await postPayrollRemove({ id })
			this.$message({
				type: Math.abs(data) > 0 ? 'error' : 'success',
				message: ['删除失败', '成功', '请撤回已发送数据'][data + 1]
			})
			row.visible = false
			if (data === 0) this.tableData = this.tableData.filter(({ spmId }) => spmId !== id)
		}
	}
}
</script>

<style lang="scss" scoped></style>